import { FC, useEffect, useRef } from "react"
import {
    AxesHelper, PerspectiveCamera,
    PointLight, Scene,
    WebGLRenderer, Vector3
} from "three"
import {
    PlaneModel, IndexedPlaneModel,
    IndexedLabmberPlaneModel,
    PlaneModelByThree
} from "R/models";
import { OrbitControls } from "three/examples/jsm/Addons.js";
const pma = new Vector3(1, 1, 2), dlpma = new Vector3(6, 2, 1), pmabt = new Vector3(0, 0, 7)
const Page: FC = () => {
    PlaneModel.position.add(pma)
    IndexedLabmberPlaneModel.position.add(dlpma)
    PlaneModelByThree.position.add(pmabt)
    const container = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        const bodyele = document.body;
        const renderer = new WebGLRenderer({ canvas: container.current! }),
            camera = new PerspectiveCamera(90, bodyele.clientWidth / bodyele.clientHeight, 1, 1000),
            scene = new Scene(),
            pointLight = new PointLight(0xffffff, 10),
            axesHelper = new AxesHelper(100),
            orbit = new OrbitControls(camera, renderer.domElement)
        pointLight.position.set(100, 100, 100)
        pointLight.decay = 0
        pointLight.power = 1000
        scene.add(axesHelper, PlaneModel, PlaneModelByThree, IndexedLabmberPlaneModel, IndexedPlaneModel, pointLight)
        console.log(PlaneModelByThree);
        
        camera.position.set(5, 6, 20)
        camera.lookAt(PlaneModel.position)
        renderer.setSize(bodyele.clientWidth * devicePixelRatio, bodyele.clientHeight * devicePixelRatio)
        function roun(t?: number) {
            renderer.render(scene, camera)
            requestAnimationFrame(roun)
        }
        renderer.setClearAlpha(.4)
        roun()
        return () => {
            PlaneModel.position.sub(pma)
            IndexedLabmberPlaneModel.position.sub(dlpma)
            PlaneModelByThree.position.sub(pmabt)
            renderer.dispose()
        }
    }, [])
    return <canvas ref={container}></canvas>
}
export default Page